<!-- 平滑导航 -->
<template>
  <ul class="smooth-nav-ul" ref="smooth-nav">
    <li
      v-for="(list, index) in navList"
      :key="index"
      :class="{ active: navActive == index }"
      @click="handleClick(list, index)"
    >
      <slot :row="list">
        {{ list[parameter[0]] }}
      </slot>
    </li>
    <span class="smooth-before" ref="smooth-before"></span>
  </ul>
</template>

<script>
import { reSize } from '@/utils/rem';
export default {
  name: "smooth-nav",
  props: {
    navList: {
      type: [Object, Array],
      default() {
        return [
          {
            text: "全部"
          }
        ];
      }
    },
    parameter: {
      type: Array,
      default() {
        return ["text"];
      }
    },
    navActive: {
      type: [String, Number],
      default() {
        return 0;
      }
    }
  },
  data() {
    return {
      tabAc: 0,
    };
  },
  watch: {
    navList(n, o) {
      this.acListWidth(this.tabAc);
    }
  },
  mounted() {

    this.acListWidth();
    window.onresize = () => {
      return (() => {
        this.acListWidth(this.tabAc);
      })()
    }
  },
  methods: {
    handleClick(list, index) {
      this.acListWidth(index);
      this.tabAc = index;
      // 调用父组件方法
      this.$emit("tagsClick", list, index);
    },
    acListWidth(index = this.navActive) {
      let smooth = this.$refs["smooth-nav"],
      acLi = smooth.children[index];
      if (acLi) {
        let acLiLeft = acLi.offsetLeft,
          acWidth = acLi.clientWidth,
          tableBefore = this.$refs["smooth-before"];
        tableBefore.setAttribute(
          "style",
          `width:${acWidth}px;left:${acLiLeft}px`
        );
        reSize(this.acListWidth, index, acLi);
      }
    }
  }
};
</script>

<style scoped lang="scss">
$ac-color: "#004899";
.smooth-nav-ul {
  display: flex;
  position: relative;
  margin-bottom: 20px;
  li {
    padding: 4px 8px;
    //margin-right: 10px;
    position: relative;
    font-size: 18px;
    color: #303133;
    line-height: 1;
    transition: 0.2s all linear;
    cursor: pointer;
  }
  .smooth-before {
    top: -5px;
    height: 34px;
    background: rgba(0, 152, 248, 0.06);
    border-radius: 4px;
    border: 1px solid #0098f8;
  }
  li {
    &.active {
      color: $ac-color;
    }
  }
}

.smooth-before {
  position: absolute;
  content: " ";
  bottom: 0;
  height: 2px;
  background: $ac-color;
  transition: all 0.25s;
}
</style>
